<template>
  <van-swipe :autoplay="3000" style="background: #fff;">
    <van-swipe-item v-for="(image, index) in images" :key="index">
      <img v-lazy="{src: GLOBAL.baseImagePath + image.imageUrl, error: error, loading: loading}" :key="GLOBAL.baseImagePath + image.imageUrl" class="swipe-img" @click="toImageUrl(image)"/>
    </van-swipe-item>
    <van-swipe-item v-if="imagesNull">
      <img src="@/assets/home/swiper-default.jpg" class="swipe-img"/>
    </van-swipe-item>
  </van-swipe>
</template>
<script>
import homeApi from '../../api/home'
import { Toast } from 'vant'
import error from '@/assets/home/swiper-error.png'
import loading from '@/assets/home/swiper-loading.png'
export default {
  name: 'Swiper',
  data () {
    return {
      images: [],
      error: error,
      loading: loading,
      imagesNull: false
    }
  },
  created: function () {
    this.getImages()
  },
  methods: {
    getImages: function () {
      const _this = this
      homeApi.getBannerList().then(function (res) {
        if (res.data.success) {
          _this.images = res.data.re
          if (_this.images.length === 0) {
            _this.imagesNull = true
          }
          // _this.$emit('swiperSize', _this.images.length)
        } else {
          Toast(res.data.msg)
        }
      }).catch(function () {
        _this.imagesNull = true
      })
    },
    toImageUrl: function (image) {
      homeApi.insertClick(image.id)
      this.$router.push({path: image.url})
    }
  }
}
</script>
<style>
  .swipe-img{
    width: 100%;
    display: block;
  }
</style>
